/*
 * @Author: your name
 * @Date: 2021-05-22 11:05:35
 * @LastEditTime: 2021-05-22 14:25:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings 
 * @FilePath: \three_demo\src\pages\3dScreen\components\center\mapLine.js
 */
import React,{useEffect} from 'react'

export default function MapLine() {
    let  myChart ='';
    // var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/aqi-beijing.json';

    useEffect(()=>{
        myChart = window.echarts.init(document.getElementById('lineMap'));
        initHistoryProp();
    })
    const initHistoryProp=()=>{
        let option = {
            grid:{
                top:1,
                bottom:25,
                left:30,
                right:30
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-6', '2021-7', '2021-8'],
                axisLine:{
                    show:false
                },
                axisLabel:{
                    color:"rgb(0, 186, 255)"
                },
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    show:false
                },
                splitLine:{
                    lineStyle:{
                        color:"#222c5f"
                    }
                }
            },
            series: [{
                data: [120, 332, 901, 434, 1290, 30, 220],
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle:{
                    color:"#00baff",
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#030409',
                    color: '#00baff',
                }
            }]
        };
        myChart.setOption(option);
        myChart.resize();
    }

    return (
        <div>
             <div id="lineMap" style={{ width: '100%', height: 210 }}></div>
        </div>
    )
}
